<!--
 标记型列表，用于标记数据，
-->
<!--
    简单的临时表格方案，需传入model与data数据
    只负责数据显示
-->
<template>
    <div class="table-wrapper">
        <Spin size="large" fix v-show="loading"></Spin>
        <table class="table">
            <thead>
                <tr>
                    <th v-for="col in tableModel.fields" :key="col.code">
                        {{col.name}}
                    </th>
                    <th v-if="tableModel.actions && tableModel.actions.length">
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr v-if="!tableData || !tableData.length">
                    <td colspan="999">
                        暂无数据
                    </td>
                </tr>
                <tr v-else v-for="(row,index) in tableData" :key="row.id" :class="markClass(row)" @click="checkTableRow(index)">
                    <td v-for="col in tableModel.fields" :key="col.code">
                        <div class="field" :class="fieldClass(row[col.code],col.code)" v-html="renderData(row[col.code],col.code,row)"></div>
                    </td>
                    <td v-if="tableModel.actions && tableModel.actions.length">
                        <div class="text-right">
                            <Button v-for="action in tableModel.actions" :icon="action.icon" v-if="action.locate==='inline'" :key="action.key" type="ghost" @click="actionTrigger({code:action.code,data:row.id})">
                                {{action.name}}
                            </Button>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script>
import GridTable from '@/components/gridTableSample'
export default {
    extends: GridTable,
    props: {
        rowCheckMode: {
            default: true
        },
        markData: {
            defalut: {}
        },
        originMark: {
            default: {}
        }
    },
    data() {
        return {
        }
    },
    watch: {
    },
    created() {
    },
    methods: {
        markClass(row) {
            var v = false
            if (row.status === 3) {
                v = !this.markData[row.id]
            } else {
                v = this.markData[row.id]
            }
            return { [this.ativeClass]: v }
        },
        checkTableRow(i) {
            this.$emit('rowCheck', {
                value: this.markData[i],
                index: i,
                id: this.data[i].id
            })
        }

    }
}
</script>

<style lang="less">

</style>
